<script setup>
  import PageLayout from '@/components/PageLayout.vue'
  import DynamicTable from '@/components/DynamicTable.vue'
  import { getLibraryList } from '@/api'
  import { ref, onMounted, useTemplateRef } from 'vue'
  import { useRouter } from 'vue-router'

  const formRef = useTemplateRef('form')
  const router = useRouter()

  const libraryTableData = ref([])

  const libraryTableColumns = [
    { label: 'Id', prop: 'id' },
    { label: '图书馆名称', prop: 'name' },
    { label: '地址', prop: 'address' },
    { label: '图书馆状态', prop: 'libraryStatus', filter: val => ['闭馆', '开放', '长期闭馆'][val] },
    { label: '开馆时间', prop: 'dailyOpenTime' },
    { label: '闭馆时间', prop: 'dailyCloseTime' },
    { label: '馆长', prop: 'managerName' },
    { label: '操作', prop: 'options' },
  ]

  const handleGetLibraryList = () => {
    const p = getLibraryList().then(res => {
      libraryTableData.value = res.data
    })

    formRef.value.load(p)
  }

  const onGoDetail = row => {
    router.push({ name: 'library-detail-user', params: { id: row.id } })
  }

  onMounted(() => {
    handleGetLibraryList()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="handleGetLibraryList">刷新</el-button>
    </template>

    <dynamic-table ref="form" :data="libraryTableData" :columns="libraryTableColumns">
      <template #options="{ row }">
        <el-button type="success" @click="onGoDetail(row)">详情</el-button>
      </template>
    </dynamic-table>
  </page-layout>
</template>
